<template>
  <div id="industry"></div>
</template>

<script>
import { selectindustrys } from '../../../api/dataCenter';
import { findDictByCode } from '../../../api/index';
export default {
  name: 'industry',
  data () {
    return {
      name: [],
      data: []
    };
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('industry'));
      // 绘制图表
      myChart.setOption({
        tooltip: { trigger: 'item', formatter: '{b} : {c}' },
        legend: {
          top: 15,
          right: 10,
          data: this.name,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '60%'],
            selectedMode: 'single',
            label: {
              formatter: '{c}',
              color: '#fff'
            },
            data: this.data
            // [
            //     {
            //         value: 535,
            //         name: '第一产业',
            //         label: {
            //             formatter: '{b}: {@2012} ({d}%)'
            //         }
            //     },
            //     {
            //         value: 535,
            //         name: '第二产业',
            //         label: {
            //             formatter: '{b}: {@2012} ({d}%)'
            //         }
            //     },
            //     {
            //         value: 510,
            //         name: '第三产业',
            //         label: {
            //             formatter: '{b}: {@2012} ({d}%)'
            //         }
            //     }
            // ]
          }
        ]
      });
    }
  },
  mounted () {
    let obj = {};
    findDictByCode('industry')
      .then(data => {
        if (data.success) {
          console.log(data);
          data.data.sort((a, b) => {
            return a.val - b.val;
          }).forEach(item => {
            obj[item.name] = item.val;
          });
          obj['未知产业'] = 0;
          console.log(obj);
          return selectindustrys();
        }
      })
      .then(data => {
        console.log(data);
        if (data.success) {
          this.data = Object.keys(obj).map(val => {
            let dataItem = { name: val };
            dataItem.value = data.data.find(item => {
              if (item.industry == null) {
                return obj[val] === 0;
              } else {
                return obj[val] === item.industry;
              }
            }).industryCount;
            return dataItem;
          });
          this.name = Object.keys(obj);
          console.log(this.data);
          this.drawLine();
        }
      });
  }
};
</script>

<style scoped>
#industry {
    width: 500px;
    height: 242px;
    border: 1px dashed rgb(54, 164, 180, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    margin-top: 20px;
    background: url('../../../assets/img/industry.png') no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 1);
}
</style>